<template>
  <section v-loading="Loading">
    <!-- 工具栏 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="condition">
        <el-form-item>
          <el-input v-model="condition.jobNumber" placeholder="工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.room" placeholder="房间"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="condition.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 操作栏 -->
    <el-col>
      <el-button type="success" size="small" @click="outExcel">导出EXCEL</el-button>
    </el-col>

    <!-- 数据展示 -->
    <el-table :data="tableData" style="width: 100%" v-loading="Loading">
      <el-table-column align="center" label="序号" fixed type="index" width="50"></el-table-column>
      <el-table-column align="center" label="工号" prop="jobNumber" fixed min-width="100"></el-table-column>
      <el-table-column align="center" label="姓名" prop="name" fixed min-width="80"></el-table-column>
      <el-table-column align="center" label="区域" prop="affiliation" min-width="100"></el-table-column>
      <el-table-column align="center" label="宿舍楼" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="房间" prop="roomNumber" min-width="80"></el-table-column>
      <el-table-column align="center" label="冷水费" prop="coldCost" min-width="65"></el-table-column>
      <el-table-column align="center" label="热水费" prop="hotCost" min-width="65"></el-table-column>
      <el-table-column align="center" label="电费" prop="electricCost" min-width="65"></el-table-column>
      <el-table-column align="center" label="公摊冷水费" prop="avgColdCost" min-width="80"></el-table-column>
      <el-table-column align="center" label="公摊热水费" prop="avgHotCost" min-width="80"></el-table-column>
      <el-table-column align="center" label="公摊电费" prop="avgElectricCost" min-width="80"></el-table-column>
      <el-table-column align="center" label="合计" prop="totalCost" min-width="65"></el-table-column>
      <el-table-column align="center" label="日期" prop="costTime" min-width="100"></el-table-column>
      <el-table-column align="center" label="当月入住天数" prop="totalDay" min-width="80"></el-table-column>
      <el-table-column align="center" label="类型" prop="type" min-width="65">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div v-if="scope.row.type === 'out'">退宿</div>
          <div v-else-if="scope.row.type === 'last'">月底结算</div>
          <div v-else></div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentChange"
        :current-page="currentPage"
        :total="totalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </section>
</template>
<script>
import { getCostDetail } from "../../api/cost.js";
export default {
  data() {
    return {
      condition: {
        jobNumber: null,
        name: null,
        room: null,
        page: 1,
        time: [],
        _time: [],
        judge: 0
      },
      tableData: [
        {
          jobNumber: null,
          name: null,
          roomNumber: null,
          coldCost: null,
          hotCost: null,
          electricCost: null,
          avgColdCost: null,
          avgHotCost: null,
          avgElectricCost: null,
          totalCost: null,
          totalDay: null,
          type: null
        }
      ],
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      Loading: false,
      currentPage: 0,
      totalPage: 0,
      Loading: false
    };
  },
  methods: {
    // 取数
    getData() {
      this.condition._time = this.timehandle(this.condition.time);
      this.Loading = true;
      getCostDetail(this.condition).then(res => {
        this.Loading = false;
        if (res) {
          this.totalPage = res.page;
          this.tableData = res.msg;
        } else {
          this.tableData = null;
          this.totalPage = 0;
          this.currentPage = 0;
        }
      });
    },

    search() {
      this.currentPage = 1;
      this.getData();
    },
    // TODO: 导出
    outExcel() {
      // 先取数,再导出
      this.condition._time = this.timehandle(this.condition.time);
      this.condition.judge = 1;
      this.Loading = true;
      getCostDetail(this.condition).then(res => {
        this.Loading = false;
        this.condition.judge = 0;
        if (res) {
          window.location.href =
            "http://192.168.10.225:80/dormitoryA/cost/Cost/costDetailExcelOut";
        } else {
          this.tableData = null;
          this.totalPage = 0;
          this.currentPage = 0;
        }
      });
    },
    currentChange(val) {
      this.condition.page = val === undefined ? this.currentPage : val;
      this.getData();
    },
    timehandle(time) {
      if (time.length === 0) return time;
      // 将时间转化为unix时间,map返回新数组
      let _time = time.map(function(value, index) {
        return parseInt(value.getTime() / 1000);
      });
      return _time;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style lang="">
</style>